<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HuanYingPan 上传</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>HuanYingPan 上传</h1>
      <span class="subtitle">配置 + 批量上传 + 历史记录</span>
    </header>

    <section class="panel settings-panel">
      <div class="row"><label>API 地址</label><input id="apiUrl" type="url" placeholder="https://example.com/api.php" /></div>
      <div class="row"><label>API Key</label><input id="apiKey" type="text" placeholder="请输入你的密钥" /></div>
      <div class="actions"><button id="saveCfg" class="btn primary">保存设置</button><span id="saveStatus" class="muted"></span></div>
    </section>

    <nav class="tabs">
      <button class="tab-btn active" data-tab="upload">上传</button>
      <button class="tab-btn" data-tab="history">历史</button>
    </nav>

    <section id="tab-upload" class="tab active">
      <div id="dropzone" class="dropzone">
        <input id="fileInput" type="file" multiple />
        <p>拖拽文件到此或点击选择（支持批量）</p>
      </div>

      <details class="adv">
        <summary>高级选项</summary>
        <div class="row"><label>公开显示</label>
          <select id="show"><option value="0">隐藏</option><option value="1">公开</option></select>
        </div>
        <div class="row"><label>下载密码</label>
          <input id="pwd" type="text" placeholder="字母数字" />
        </div>
      </details>

      <div class="actions"><button id="uploadBtn" class="btn primary" disabled>开始上传</button></div>
      <div id="uploadList" class="upload-list"></div>
    </section>

    <section id="tab-history" class="tab">
      <div class="history-actions">
        <button id="refreshHistory" class="btn">刷新</button>
        <button id="clearHistory" class="btn">清空</button>
      </div>
      <div id="historyList" class="history-list"></div>
    </section>
  </div>
  <script src="popup.js"></script>
</body>
</html>